<template>
    <div id="features" class="py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20">
        <div class="grid grid-cols-12 gap-4 justify-center">
            <div class="col-span-12 text-center mt-20 mb-6">
                <div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">热门推荐</div>
                <span class="text-muted-color text-2xl">使用频率最高的在线工具...</span>
            </div>

            <ToolCard v-for="(tool, index) in tools" :key="index" :tool="tool" />
        </div>
    </div>
</template>

<script setup>
import ToolCard from './ToolCard.vue';

const tools = [
    {
        route: '/customtools/char?id=123',
        title: '在线随机数生成',
        description: '在线随机数生成器，支持生成随机整数值和随机浮点数值。指定唯一时，生成的所有随机数不会重复。',
        icon: 'pi pi-fw pi-users',
        iconBackground: 'bg-yellow-200',
        iconColor: 'text-yellow-700',
        background: 'linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))'
    },
    {
        route: '/customtools/char?id=124',
        title: '在线秒表计时器',
        description: '在线秒表计时器，支持在线进行秒表计时，计时时间精确到毫秒级别。支持暂停、计次和下载功能。',
        icon: 'pi pi-fw pi-palette',
        iconBackground: 'bg-cyan-200',
        iconColor: 'text-cyan-700',
        background: 'linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))'
    },
    {
        route: '/customtools/char?id=125',
        title: '在线单位换算',
        description: '在线单位单位换算器，支持长度，质量(重量)，面积，容量(体积)，数据等多种单位的互相转换。',
        icon: 'pi pi-fw pi-map',
        iconBackground: 'bg-indigo-200',
        iconColor: 'text-indigo-700',
        background: 'linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))'
    },
    {
        route: '/customtools/char?id=126',
        title: '在线倒计时器',
        description: '在线倒计时器，支持在线设置倒计时，倒计时结束以后可以设置播放闹铃声音。',
        icon: 'pi pi-fw pi-id-card',
        iconBackground: 'bg-slate-200',
        iconColor: 'text-slate-700',
        background: 'linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))'
    },
    {
        route: '/customtools/char?id=127',
        title: '提前还贷计算器',
        description: '在线提前还款计算器，计算等额本金或者等额本息的贷款提前还款后，节省的利息或者减少的贷款时间，以及提前还款前后详细的对比信息。',
        icon: 'pi pi-fw pi-star',
        iconBackground: 'bg-orange-200',
        iconColor: 'text-orange-700',
        background: 'linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))'
    },
    {
        route: '/customtools/char?id=128',
        title: '在线手写签名',
        description: '在线电子签名工具，支持生成手写电子签名，支持通过自定义参数控制签名字体颜色，线条粗细等个性化设置，手写签名支持下载为png,jpeg,svg格式的图片。',
        icon: 'pi pi-fw pi-moon',
        iconBackground: 'bg-pink-200',
        iconColor: 'text-pink-700',
        background: 'linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))'
    },
    {
        route: '/customtools/char?id=129',
        title: '年龄计算器',
        description: '年龄计算器，在线计算周岁年龄和虚岁年龄，同时显示对应的生肖和星座。',
        icon: 'pi pi-fw pi-shopping-cart',
        iconBackground: 'bg-teal-200',
        iconColor: 'text-teal-700',
        background: 'linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))'
    },
    {
        route: '/customtools/char?id=130',
        title: '在线颜文字大全',
        description: '在线颜文字大全，展示可爱有趣的文字表情，支持一键复制使用。',
        icon: 'pi pi-fw pi-globe',
        iconBackground: 'bg-blue-200',
        iconColor: 'text-blue-700',
        background: 'linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))'
    },
    {
        route: '/customtools/char?id=131',
        title: '在线点阵字生成器',
        description: '在线点阵字生成器，XBM文件生成器，支持生成文字和图片的黑白点阵，支持将生成的黑白点阵下载为XBM文件或者图片文件。',
        icon: 'pi pi-fw pi-eye',
        iconBackground: 'bg-purple-200',
        iconColor: 'text-purple-700',
        background: 'linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))'
    }
];
</script>